


Uhmuni's Stepping Stones II: A Small HTML Guide

by Uhmuni



Series: Uhmuni's Stepping Stones For A Better AO3 [2]
Category: Original Work, Uhmuni
Language: English
Status: Completed
Published: 2021-02-27
Updated: 2021-02-27
Packaged: 2021-03-18 02:54:09
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 7
Words: 1,758
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/29727231
Author URL: https://archiveofourown.org/users/Uhmuni/pseuds/Uhmuni
Series: Uhmuni's Stepping Stones For A Better AO3 [2]
Series URL: https://archiveofourown.org/series/2184906
Kudos: 1





	1. Chapter 1

What I'm pretty much self-taught and able to help with:

  * [Basic HTML](https://archiveofourown.org/works/29727231/chapters/73113588) (Specifically for comments)
  * [Site Skins](https://archiveofourown.org/works/29727231/chapters/73114518#workskin) (Creating a Simple Skin)
  * [Elongated comments and Image Linking](https://archiveofourown.org/works/29727231/chapters/73115442#workskin) (Two ways)
  * [Aligning ](https://archiveofourown.org/works/29727231/chapters/73116096#workskin)
  * [<p> vs. <br>](https://archiveofourown.org/works/29727231/chapters/73116441#workskin)
  * [<Div>](https://archiveofourown.org/works/29727231/chapters/73116573#workskin)




	2. I: Basic HTML

**Bolding, Italicizing, and Underlining For Dummies**

**ALL HTML, unless user-made, must be typed in lowercase.**

####  **To Bold Your Text:**

**< b>text here</b> [common]**

<strong>text here</strong>.

####  **To Give Emphasis to A Certain Phrase:**

**< i>text here</i> [common]**

<em>text here</em>

####  **To Underline Your Text:**

####  **< u>text here</u> [common]**

<ins>text here</ins>

**To Strike Your Text:**

<strike>text here</strike>

<s>text here</s>

<del>text here</del>.

**To Make Your Text Bigger:**

<big>text here</big>

**To Make Your Text Smaller:**

<small>text here</small>

*** If you're on pc** , you can **highlight the text or letter** by **holding down the left control key (ctrl)** , and:

pressing b (to **bold** )

Pressing i (to _italicize)_

Pressing u (to  underline.) 

_**You can also do all three together!** _

**Headers**

#  **Header One**

\- The **biggest** of the headers.

\- The most eye-catching.

\- Can be moved with CSS

h1 {

text-align: [left, right, center, justify];

}

 **To get header one, you can use the <h1>text here</h1> html tag. **If you're on pc, hold down the **left** **alt** key, the **left** **shift** key, and the number **1** on the **number row.**

* * *

## Header Two

\- Simple.

-The non-bold version of Header 1.

\- A little more useful.

\- Can be moved from the center **without** CSS

 **To get header two, you can use the <h2>text here</h2> html tag. **If you're on pc, hold down the **left** **alt** key, the **left** **shift** key, and the number **2** on the **number row.**

* * *

### Header 3

\- Smaller but not the smallest

\- Eye-catching because of its contrast to the rest (the double lines.)

\- Double lines can be removed with CSS:

h3 {

border: hidden

}

 **To get header three, you can use the <h3>text here</h3> html tag. **If you're on pc, hold down the **left** **alt** key, the **left** **shift** key, and the number **3** on the **number row.**

* * *

####  **Header 4**

\- Even smaller but still not the smallest

 **To get header four, you can use the <h4>text here</h4> html tag. **If you're on pc, hold down the **left** **alt** key, the **left** **shift** key, and the number **4** on the **number row.**

* * *

#####  **Headers 5**

######  **and 6**

\- The two smallest

\- Header six is the small version of **H** **eader 3**

\- Header 6's border can also be removed with CSS **(see Header 3)**

 **To get header five, you can use the <h5>text here</h5> html tag. **if you're on pc, hold down the **left** **alt** key, the **left** **shift** key, and the number **5** on the **number row.**

 **To get header six, you can use the <h6>text here</h6> html tag. **If you're on pc, hold down the **left alt** key, the **left shift** key, and the number **6** on the **number row.**


	3. II: Site Skins

Building Your Own Site Skin

To make an easy site skin, you can use the AO3 “wizard” to get the base colors down, then go back and add the CSS that you want to add. I usually do this when I don’t feel like coding lol, it’s really easy and quick. some CSS that you can add to make it “fancy” will be below.

**To remove the Logo In The Upper Left Corner:**

#header h1 img {

display: none;

}

#header h1 {

position: static;

}

#header h1 .landmark {

opacity: 1;

font-size: 100%;

line-height: 1;

height: auto;

width: auto;

display: inline;

}

#header h1 a span:hover {

}

* * *

**To Make Buttons Flat:**

.actions a,

.actions a:link,

.action,

.action:link,

.actions input,

input[type="submit"],

button,

.current,

.actions label {

background: #f5f1ed;

border-color: #cfcbc8;

border-radius: 0;

color: #3da6ae;

}

.actions a:hover,

.actions input:hover,

.actions a:focus,

.actions input:focus {

border-color: #cfcbc8;

box-shadow: none;

color: #004a87 ;

text-decoration: underline;

}

.actions a:visited,

.action:visited,

.action a:link,

.action a:visited {

color: #5c7b87;

}

.actions a:active,

.current,

a.current,

.current a:visited {

background: #c7c3c1;

border-color: #cfcbc8;

box-shadow: none;

color: #261e1a;

}

.delete a,

span.delete {

border-radius: 0;

box-shadow: none;

}

.secondary {

background: #fff;

border: 2px solid #c7c3c1;

border-radius: 0;

box-shadow: none;

}

dl.stats + .landmark + .actions {

float: right;

}

dl.stats + .landmark + .actions {

margin: 0 auto;

}

* * *

 **Circular** **Icons:**

.bookmark .status span,

.actions a,

.actions a:visited,

.action,

.actions input,

input[type="submit"],

button,

.current,

.actions label,

legend,

textarea,

input,

.icon {

border: 1px solid;

border-radius: 1.5em;

}

.icon {

border-radius: 5em;

}

* * *

To make finding HEX codes easier in the editor: Use the find tool on web (ctrl +f) to see what should be the same and what can be a different color. For a list of colors, I use [ schemecolor ](http://www.schemecolor.com/) , [ colorspace ](http://www.mycolor.space/) , and [ w3schools color picker ](https://www.w3schools.com/colors/colors_picker.asp?).


	4. III & IV: Elongated Comments and Image Linking

**Typing Out Elongated Comments** **  
****(Way One: AO3 Editor)**

I’m sure the lot would love to type out longer comments without having to be limited to such a small area to work with. If you have an AO3 account, you can use the **AO3 E** **ditor** to type out what you want, then **COPY AND PASTE THE** **HTML** to the comment section. Doing this allows you ample space to type and gives the option and choice to use the Basic HTML in Chapter 2.

 **Typing Out Elongated Comments** **  
****(Way Two: Open-Toolz)**

If you don’t have an AO3 account, first and foremost, I highly recommend getting one. Secondly, if you still want to type and have the space and range to do so, [Open-Toolz](https://www.online-toolz.com/tools/online-notepad-and-text-editor.php) (link provided) is the perfect online editor that offers all the benefits of the AO3 editor. Best part is? You don’t need an account to use it ^^.

**Image Linking (Way One)**

**< img src="LINK_TO_IMAGE_HERE"</img>**

**To Upload Images anywhere on AO3, You Can:**

1 Go to Google - or any image sharing website - and search the photo you want (can be gifs as well.)

2 **R** **ight-click or press and hold the image (if mobile) and COPY IMAGE ADDRESS.**

3 Use the <img> tag above and **paste** the link where it goes.

**Example:**

**< img src="https://i.ibb.co/D53QftR/Esi6n87-Vk-AEVt-TI.jpg"</img> will look like:**

[ **** ](https://i.ibb.co/D53QftR/Esi6n87-Vk-AEVt-TI.jpg)

(isn't he so lovely?)

**Image Linking (Way Two)**

**If you want the images stored and saved for later use, you can use** [ **IMGBB** ](http://www.imgbb.com/) **(like I use).**

####  **To Upload Images anywhere on AO3 Using IMGBB, You Can:**

1 Go to Google - or any image sharing website - and search the photo you want (can be gifs as well.)

2 **D** **ownload the image.**

3 **Upload the image to imgbb** (link provided above). You don’t need an account unless you want the images saved under a username. Just remember the hot link attached to it.

4 Copy and paste the **DIRECT LINK** where it goes in the HTML. **This link can** **be found in the dropdown for embed codes.**

**To Link A Webpage To An Image:**

Beneficial if you’re lazy like me and don’t really care to link using text. If you’re sharing a gif, you can just link whatever to the gif and kill two birds with one stone.

**< a href="link_to_webpage_here"><img src="link_to_image_here"</img></a>**

**Example:**

[ **** ](http://www.twitter.com/Uhmuni)

**To Link A Webpage To Text:**

<p><a href="link_to_webpage_here">text here</a></p>

**Example:**

[My Twitter](https://twitter.com/Uhmuni/)


	5. V: Aligning

**Alignments**

Aligning is done by using the four basic “ways” of text: left, center, right, and justify. In order to align a text or image, you’ll have to use a class. A **class** is a **trait or add-on that you can add to any HTML tag.** These classes can be **customized** with **CSS.**

**To left align text:**

<p align= left>text here</p>

####  **To center text:**

<p align= center>text here</p>

**To right align text (Type From Right To Left):**

<p align= right>text here</p>

**To justify text (Sentences and paragraphs cut evenly at ends):**

<p align= justify>text here</p>

####  **To Left Align Images:**

<p align = left><img src= link_to_image_here”</img>

####  **To Center Images:**

**<** p align = center><img src= link_to_image_here”</img>

####  **To Right Align Images:**

<p align = right><img src= link_to_image_here”</img>

####  **To Justify Images (Not Commonly Used):**

<p align = justify><img src= link_to_image_here”</img>


	6. VI: <p> vs. <br>

**The difference between** **  
** **< /p> (Enter) & <br /> (Shift + Enter)**

The easiest way for me to show the difference between the two is to give a live example.

**This is the first half of an example sentence that has been closed with a** **paragraph break.** **< /p>** ****

**This is the second half of the example sentence that had been closed with a paragraph break. </p>**

* * *

**This is the first half of an example sentence that has been closed with a** **line break.** **< br />** **  
** **This is the second half of the example sentence that had been closed with a line break. <br />**

* * *

There's an obvious **gap** between the two, with the **line break** sentences being visually **tighter**. When typing extended paragraphs, using <br />, as I've learned, is a lot easier to work with and calls for a much **cleaner** HTML. This string moves everything as one, however, so if you want to align something, say an image, then you have to break it into its own paragraph.

**Example:**

**This text is has been closed off with html tag <br />.** **  
** **I do recommend using <br /> to type out stories on AO3, simply because of the easier HTML, UNLESS you're using CSS to write your story like I am.** **  
** **The image below is also a part of the <br /> paragraph. If I center this text, everything, including the image, will move with it.  
** **  
**

**Example 2:**

**This text is closed off with html tag </p>.**

**I recommend using </p> when you're certain that you want to start and stop a certain line. This mostly comes in handy with aligning images without text.**

**The image below is** **not** **a part of the paragraph above and can be moved freely without taking this example with it.**

****

**The <br /> html tag can be taken down**

**one line**

**two lines**

**three lines**

**four lines**

  
  
  
  
  
  
  
  
**or however far you want to go without ever breaking. All of these lines, if moved, will move as one. To add more lines, simply hold the shift key and hit enter** **.**


	7. VII: <Div>

**Pointless but Needed.**

**< div>** is the html tag that I'll only use when working with a specific and overall look. If you couldn't tell, 'div' stands for  divide or division . I usually don't use this tag unless I'm planning to have something with a specific CSS in-text that I want separated.

One of the  **main** reasons I hate working with <div> is because it clutters the HTML with paragraph breaks, which pushes the content down each time you open and close your draft or chapter. ugh.


End file.
